<template>
    <div class="div_main_frame" style="text-align:center;margin:0 auto;margin-top:0px;padding-top:0px;" align="center">
        
    <div class="fastweb_div_middle" style="width:100%;min-height:200px;text-align:center;margin-top:0px;padding-top:0px;">

        <div class="div_page_top_middle" style="width:auto;height:auto;margin:0;padding:0;text-align:center">
            <div class="div_main_frame" style="width:98%;height:auto;text-align:center;">
                <div class="dingzhi_tile" style="text-align:center;margin:0;padding:0;">
            <strong>简要介绍</strong>
            </div>
            <div class="" style="margin-left:6px">
                <el-row align="left" style="text-align:left">
                <el-col :span="24">
                    <p style="line-height:40px;">1. 【大事记】和【市场】栏目，是按天收集的资讯信息。</p>
                    <p style="line-height:40px;">2. 网站免费提供按【实体集】和【时间段】筛选的【近期资讯】定制服务。</p>
                    <p style="line-height:40px;">3. 查看首页，了解定制效果。</p>
                    <p style="line-height:40px;">4. 查看<router-link to="introduce" style="font-size:18px;">定制介绍</router-link>，了解使用方法，否则可能导致无效的操作。</p>
                </el-col>
                </el-row>
            </div>
            </div>
            
            
            <div class="div_main_frame" style="width:98%;height:auto;text-align:center;">
              <div class="dingzhi_tile" style="text-align:center;margin:0;padding:0;">
                <strong>资讯定制</strong>
              </div>
            </div>
            <div class="" style="margin-left:6px;width:98%;text-align:left;font-size:14px;">
              <el-form ref="form" :model="form" :label-position="labelPosition" label-width="auto" :size="size">
              <el-form-item label="实体集名称" :hide-required-asterisk="true">
                <el-input v-model="title" :hide-required-asterisk="true" @blur="blur_func" id="suggest_id"></el-input>
                <div class="search_menu">
                  <ul class="input_suggest">
                  <li v-for="input_val in input_list" :key="input_val" @mousedown.stop="select_li(input_val)" style="font-size:16px;line-height:18px;">
                    {{input_val}}
                  </li>
                  </ul>
                </div>
              </el-form-item>
                <p style="margin-bottom:14px;">{{suggest_msg}}<font color="red"><strong>必填</strong></font>，自动推荐最多10条，实体集<router-link to="search">查询</router-link>，现有实体集<router-link to="list">分类查看</router-link>，<router-link to="suggest">自定义实体集</router-link></p>
                <p style="margin-bottom:14px;"><font color="red"><strong>注意</strong></font>，实体集名称推荐不包含自定义实体集，确保填写正确即可。</p>
              <el-form-item label="定制关键词">
                <el-input v-model="form.custom_word"></el-input>
              </el-form-item>
                <p style="margin-bottom:14px;">可填多个，用英文逗号分割，目前最多支持5个。</p>

              <el-form-item label="用户标识">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
                <p style="margin-bottom:14px;"><font color="red"><strong>必填</strong></font>，网站不需要注册，通过此标识进行定制展示，不少于8位。</p>

              <el-form-item label="开始日期">
                  <el-date-picker
                    v-model="form.start_date"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="一年以内有效"
                    style="width: 100%"
                  ></el-date-picker>
              </el-form-item>
                <p style="margin-bottom:14px;">资讯最早日期，超过一年自动调整为30天。</p>
                <el-button type="primary" @click="onSubmit">提交</el-button>
              <!--el-form-item-->
                <p><font color="red"><strong>{{result_message}}</strong></font></p>
              <!--/el-form-item-->
            </el-form>
            </div>

            <div class="div_main_frame" style="width:98%;height:auto;text-align:center;">
                <div class="dingzhi_tile" style="text-align:center;margin:0;padding:0;">
                <strong>注意事项</strong>
                </div>
            <div class="" style="margin-left:6px">
                <el-row align="left" style="text-align:left">
                <el-col :span="24">
                    <p style="line-height:40px;">1. 定制服务不收费，如果您愿意，可在下方微信扫码进行支持。</p>
                    <p style="line-height:40px;">2. 如果邮箱为空或者填写错误，则需要到首页查找生成结果，预计需要0.5~4小时。</p>
                    <p style="line-height:40px;">3. 功能还在努力迭代中，碰到问题还请谅解，欢迎提供建议。</p>
                    <p style="line-height:40px;">4. 定制任务会不定期重跑(3~5天)，自动增加添加最新数据。</p>
                </el-col>
                </el-row>

                <el-row align="center" style="text-align:left">
                  <el-col :span="24">
                    <div style="text-align:center;">
                    <img src="~@/assets/weixin.png" style="width:60%;"><br/>
                    </div>
                  </el-col>
                </el-row>

            </div>
            </div>
            
        </div>
        <div style="clear:both"></div>
    </div>
    </div>
    
    <ViewFooter/>
</template>

<script>
import { reactive,toRefs,watch,ref } from 'vue'
import { getCurrentInstance } from 'vue'
import ViewFooter from '@/components/ViewFooter.vue'
import "@/assets/global.css"
import "@/assets/fastweb.css"

const size = ref('default')
const labelPosition = ref('top')

export default 
{
    name: 'PageCustomize',
    components: {
        ViewFooter
    },

    data () {
      return {
        input_list: [],
        entity_list_url: '',
        result_message: '',
        suggest_msg: '',
        title: '',
        select_tag: 0,
        form: {
            entity_name: '',
            custom_word: '',
            start_date: '',
            email: '',
        },
      };
    },
    setup(){
      const host = getCurrentInstance()?.appContext.config.globalProperties.host
      //entity_list_url = host + ""
      return {host};
        
    },
    methods: {
        onSubmit() {
            console.log('submit5!' + this.title)
            this.result_message = ""
            var email_check = true
            if (this.title === '') {
              alert("实体集名称不能为空");
              return;
            } else {
              if (this.form.email === '') { 
                // this.form.email = "bingzhao456@163.com";
                // email_check = false;
                alert("用户标识不能为空");
                return;
              } else {
                if (this.form.email.length < 8) {
                  alert("用户标识长度不能小于8位");
                  return;
                }
                /*
                var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                if(!reg.test(this.form.email)){
                  // this.form.email = "bingzhao456@163.com";
                  email_check = false;
                  // alert("邮箱格式校验出错");
                  // return;
                }*/
              }
            }

            let data = new FormData();
            data.append("entity_name", this.title);
            data.append("custom_word", this.form.custom_word);
            if (email_check) {
              data.append("email", this.form.email);
            } else {
              data.append("email", "bingzhao456@163.com");
            }
            data.append("start_date", this.form.start_date);
            var api_url = this.host.concat("/api/custom_task_add")
            this.axios.post(api_url, data)
            .then(response => {
                if(response.status != 200){
                  this.$message({
                      message: "请求出错",
                      type: "fail"
                  });
                  return;
                }
                if(response.data.result != 0){
                  this.$message({
                      message: response.data.msg,
                      type: "fail"
                  });
                  return;
                }
                this.result_message = "任务添加成功，请注意查收邮件"
            })
            .catch(error => alert("添加失败，请确认填写信息或稍后再试。"));
        },
      blur_func:function() {
        console.log("blur:");
        this.input_list=[];
      },
      focus:function(){
        console.log("focus:" + this.title.trim());
        if (this.select_tag == 1) {
          this.select_tag = 0;
          return;
        }
        if(document.querySelector('#suggest_id')==document.activeElement){
          console.log("focus:");
          this.fuzzy_search(this.title.trim());
        }
      },
      fuzzy_search:function(value){
          //this.input_list=["a", "b", "c"];
          //return;
          
          console.log("fuzzy_search:" + value);
          var that =this;
          that.input_list=[];
          if(!value){
              that.input_list=[];
              return;
          }
          this.suggest_msg = "";
          var url = this.host.concat("/api/display_entity_suggest?word=").concat(value);
          this.axios.get(url)
          .then(response => {
            if(response.status == 200){
            //if(response.data.code == 200){
              var json_data = JSON.parse(response.data.data);
              //for (var val in json_data["data"]) {
              if (json_data["data"].length == 0) {
                this.suggest_msg = "没有相关数据";
              }
              for (var i = 0, l = json_data["data"].length; i < l; i++) {
                console.log(json_data["data"][i]["title"]);
                this.input_list.push(json_data["data"][i]["title"]);
              } 
            } else {
              this.suggest_msg = "推荐失败";
            }
          })
          .catch(error => alert(error));

          //调取接口
          that.input_list=[];
      },
      select_li:function(input_val) {
        console.log("select:" + input_val);
        var lists = input_val.split("|")
        console.log("select1:" + lists[0] + lists[1] + lists[2]);
        this.title = input_val;
        this.input_list=[];
      }
    },
    mounted() {
        
    },
    watch:{
        title:function(){
            console.log("watch:" + this.title);
            this.focus();
        },
    },
}

var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c2ba86525ff37a3b2dd6cdadb129fdb5";
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(hm, s);
</script>

<style>

.dingzhi_tile {
    text-align:left;
    padding-left:30px;
    line-height:50px;
    font-size: 24px;
    border-top:1px solid #009100;
    /*border-bottom:1px dashed #009100;*/
}


.search_menu {
  background-color: gold;
  top:40px;
  width:100%;
  height:auto;
  border:1ps solid blue;
  position: absolute;
  text-align: left;
  z-index: 10;
}

.search_menu ul{
  margin-bottom: 0;
  list-style-type: none;
}

.search_menu li {
  padding: 5px;
  font-size: 1.1em;
  cursor: pointer;
}

.search_menu li:hover {
  background-color: beige;
}

.search:hover .search_menu {
  display: block;
}


</style>
